<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/test.css">
    <script src="js/flexible.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="swiper-container one">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
              <a href="#">
                  <img src="./images/a9688d3907fcbee.gif" alt="">
                  <p>好久不见 你在哪里</p>
              </a>
          </div>
          <div class="swiper-slide">
            <a href="#">
                <img src="./images/img-ccbf99438e8aa34f4bf6602a56781e97.jpg" alt="">
                <p>好久不见 你在哪里</p>
            </a>
            </div>
            <div class="swiper-slide">
            <a href="#">
                <img src="./images/v2-4b31bba75d936971134171f35916dfab.jpg" alt="">
                <p>好久不见 你在哪里</p>
            </a>
            </div>      
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>

    <div class="swiper-container two">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#">
                  <img src="./images/a9688d3907fcbee.gif" alt="">
                  <p>好久不见 你在哪里</p>
              </a>
            </div>
            <div class="swiper-slide">
                <a href="#">
                    <img src="./images/img-ccbf99438e8aa34f4bf6602a56781e97.jpg" alt="">
                    <p>好久不见 你在哪里</p>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="#">
                    <img src="./images/v2-4b31bba75d936971134171f35916dfab.jpg" alt="">
                    <p>好久不见 你在哪里</p>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="#">
                    <img src="./images/img-ccbf99438e8aa34f4bf6602a56781e97.jpg" alt="">
                    <p>好久不见 你在哪里</p>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="#">
                    <img src="./images/v2-4b31bba75d936971134171f35916dfab.jpg" alt="">
                    <p>好久不见 你在哪里</p>
                </a>
            </div> 
            <div class="swiper-slide">
                <a href="#">
                    <img src="./images/img-ccbf99438e8aa34f4bf6602a56781e97.jpg" alt="">
                    <p>好久不见 你在哪里</p>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="#">
                    <img src="./images/v2-4b31bba75d936971134171f35916dfab.jpg" alt="">
                    <p>好久不见 你在哪里</p>
                </a>
            </div> 
        </div>
                
        </div>
        <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
      </div>
      <script src="./js/swiper.min.js"></script>
      <script>
        var swiper = new Swiper('.one', {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });

        var swiper = new Swiper('.two', {
            slidesPerView: 2,
            spaceBetween: 20,
            pagination: {
            el: '.swiper-pagination',
            clickable: true,
      },
    });
      </script>
</body>
</html>